<template>
    <div style="width: 100%;padding-top: 10%">
        <el-row justify="space-between" class="login-content">
            <el-col :xs="{span: 22, offset :1}" :sm="{span: 6, offset :9}" :md="{span:5,offset:9.5}"
                    :xl="{span:4,offset:10}">
                <MyCard class="register-form">
                    <el-form label-position="top" label-width="80px" ref="dataForm" :rules="rules"
                             :model="dataForm" v-if="login">
                        <h3>登录</h3>
                        <el-form-item label="请输入用户名" prop="user">
                            <el-input v-model="dataForm.user"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入密码" prop="password">
                            <el-input v-model="dataForm.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%" @click="submitForm('login',dataForm)"
                                       :loading="loginLoading">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-form label-position="top" label-width="80px" ref="registerform" :rules="rules"
                             :model="registerform" v-if="register">
                        <h3>注册</h3>
                        <el-form-item label="请输入用户名" prop="user">
                            <el-input v-model="registerform.user"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入密码" prop="password">
                            <el-input v-model="registerform.password" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="请输入QQ" prop="qq">
                            <el-input v-model="registerform.qq"></el-input>
                        </el-form-item>
                        <el-form-item label="邀请码" prop="rkey">
                            <el-input v-model="registerform.key" disabled></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%" @click="submitForm('register',registerform)"
                                       :loading="loginLoading" :disabled="disableds">注册
                            </el-button>
                        </el-form-item>
                        <span @click="login = true;register = false;$router.push('/Login');"
                              style="color: #0000cc;font-size: 13px">已有账号？点击登录</span>
                    </el-form>
                </MyCard>

            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            const validateUser = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入正确的用户名'));
                } else {
                    callback();
                }
            };
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            return {
                title: '',
                disableds: true,
                login: false,
                register: false,
                registerform: {},
                admin: "",
                dataForm: {
                    user: '',
                    password: '',
                },
                loginLoading: false,
                rules: {
                    user: [
                        {validator: validateUser, trigger: 'blur'}
                    ],
                    password: [
                        {min: 6, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}
                    ]
                }
            }
        },

        methods: {
            submitForm(a, b) {
                let _this = this;
                _this.$store.commit('switchAdminLogin', true);
                _this.$store.commit('switchId', 'admin');
                //this.$router.push("/admin");

                _this.$http.post('/api/cooperationVerify.php', {
                    id: a,
                    data: JSON.stringify(b),
                }).then(function (response) {
                    if (response.data.status === "success") {
                        if (a === 'login')
                            _this.$router.push('/mdd');
                        if (a === 'register') {
                            _this.$message({
                                message: response.data.msg,
                                type: response.data.status
                            });
                            _this.$router.push("/Login");
                            _this.login = true;
                            _this.register = false;
                        }

                    } else {
                        _this.$message({
                            message: response.data.msg,
                            type: response.data.status
                        });
                    }
                });
            }
        },
        mounted() {
            let _this = this;
            console.log(this.$route.query.id);
            console.log(this.$route.query.key);
            console.log(this.$route.query.type);

            _this.$store.commit('switchId', 'login');
            //_this[this.$route.query.id] = true;

            if (!_this.$route.query.id) {
                _this.login = true;
                _this.title = '登录';
            } else {
                _this.register = true;
            }

            if (this.$route.query.id === 'register') {
                _this.$http.post('/api/getKey.php', {
                    key: _this.$route.query.key
                }).then(function (response) {
                    if (response.data.status === "success") {
                        _this.registerform.key = _this.$route.query.key;
                        _this.disableds = false;
                    } else {

                    }
                })
            }
        }
    }

</script>
<style scoped>
    .login-content {

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 2px;
        min-height: 688px;
        height: 100%;
        box-sizing: border-box;

    }

    .register-form {
        margin: 0 auto;
        padding: 25px 25px 15px;
    }

    .register-form .title {
        padding: 0 auto 24px;
        text-align: center;
        color: #505458;
    }

    .login-btn {
        color: #606266;
        font-size: 14px;
        text-align: center;
        padding-top: 16px;
    }
</style>
